<template>
	<page>
	<view class='notice'>
	  <image class='noticeIcon' src='/static/images/chat/notice.png'></image>
	  <view class='noticeContent'>
	    <view class="example">
	      <view class="marquee_box">
	        <view class="marquee_text"  :style="'transform:translateX('+left+'px);'+isAnimate?' transition: all '+scrollScenond*notice.length+'ms linear;':''">
	          {{notice}}
	        </view>
	      </view>
	    </view>
	  </view>
	  <image class='noticeIcon' src='/static/images/chat/list.png' bindtap='About'></image>
	</view>
	<image v-if="speak" class='speakGif' src='/static/images/chat/speak.gif'></image>
	


<scroll-view :scroll-y="true" id="recordWrapper" :scroll-top="scrollTop" :scroll-with-animation="false" class='chat-msg-box' :upper-threshold="50" @scrolltoupper="pushHistory"> 







<view class='point-box' v-if="atMsgCount > 0" @tap="closeAtToast">
        <view >有{{atMsgCount}}人@了你</view>
      </view>
  <view id="content-box" @tap='bindMsgBoxClick'>
    <view v-for="(item,index) in messageArr" :key="index">
      <view class='enter' v-if="item.type=='enter'">
        <view class='enterMsg'>欢迎{{item.nick}}进入</view>
      </view>
      <view class='enter' v-if="item.type=='tip'">
        <view class='enterMsg'>{{item.tip}}</view>
      </view>
      <view class='enter' v-if="item.type=='deleteMsg'">
        <view class='enterMsg'>{{item.tip}}</view>
      </view>

      <!--文本消息-->
      <view class='chat-msg' v-if="item.type=='text'&&!item.isMe">
        <image class='user-avatar' :src="item.avatar" @tap="gotoUserDetail" @longpress='longTapAt' :data-item="item"></image>
        <view class='msg'>
          <view v-if="!item.history" class='user-name'>
            <view :class="item.identify=='群主'?'identity-owner':item.identify=='管理员'?'identity-manager':'identity-normal'">{{item.identify}}</view>{{item.nick}}</view>

          <view class='msg-box'>
            <rich-text :nodes="item.nodes" class='content'  :data-index="index" @longtap='showMsgMenu'></rich-text>
            <view class="menu-list" v-if="selectMenuIndex == index" :style="'left:'+menuLeft+'px;top:'+menuTop+'px'">
              <view class="menu-item" :data-msg="item.detail" :data-index="index" @tap="deleteMsg">撤回</view>
              <!-- <view class="menu-item">回复</view> -->
              <view class="menu-item" @tap="closeMenu">关闭</view>
            </view>
          </view>
        </view>
      </view>

      <view class='chat-msg-my' v-if="item.type=='text'&&item.isMe">
        <image class='user-avatar-my' :src="item.avatar" @tap="gotoUserDetail" @longpress='longTapAt' :data-item="item"></image>
        <view class='msg-my'>
          <view class='msg-box-my'>
            <rich-text :nodes="item.nodes" class='content-my' @longtap='showMsgMenu' :data-index="index"></rich-text>
            <view class="menu-list" v-if="selectMenuIndex == index" :style="'left:'+menuLeft+'px;top:'+menuTop+'px'">
              <view class="menu-item" :data-msg="item.detail" :data-index="index" @tap="deleteMsg">撤回</view>
              <!-- <view class="menu-item">回复</view> -->
              <view class="menu-item" @tap="closeMenu">关闭</view>
            </view>
          </view>
        </view>
      </view>

      <!--图片消息-->
      <view class='chat-msg' v-if="item.type=='image'&&!item.isMe">
        <image class='user-avatar' :src="item.avatar" @tap="gotoUserDetail" @longpress='longTapAt' :data-item="item"></image>
        <view class='msg'>
          <view v-if="!item.history" class='user-name'>
            <view :class="item.identify=='群主'?'identity-owner':item.identify=='管理员'?'identity-manager':'identity-normal'">{{item.identify}}</view>{{item.nick}}</view>
          <view class='msg-box' @tap='rangImg' :data-src="item.nodes[0].attrs.src">
            <rich-text :nodes="item.nodes" class='content-img' @longtap='showMsgMenu' :data-index="index">{{item.text}}</rich-text>
            <view class="menu-list" v-if="selectMenuIndex == index" :style="'left:'+menuLeft+'px;top:'+menuTop+'px'">
              <view class="menu-item" :data-msg="item.detail" :data-index="index" @tap="deleteMsg">撤回</view>
              <!-- <view class="menu-item">回复</view> -->
              <view class="menu-item" @tap="closeMenu">关闭</view>
            </view>
          </view>
        </view>
      </view>

      <view class='chat-msg-my' v-if="item.type=='image'&&item.isMe">
        <image class='user-avatar-my' :src="item.avatar" @tap="gotoUserDetail" @longpress='longTapAt' :data-item="item"></image>
        <view class='msg-my'>
          <view class='msg-box-my' @tap='rangImg' :data-img="item.nodes[0].attrs.src" :data-src="item.nodes[0].attrs.src">
            <rich-text :nodes="item.nodes" class='content-my-img' @longtap='showMsgMenu' :data-index="index">{{item.text}}</rich-text>
            <view class="menu-list" v-if="selectMenuIndex == index" :style="'left:'+menuLeft+'px;top:'+menuTop+'px'">
              <view class="menu-item" :data-msg="item.detail" :data-index="index" @tap="deleteMsg">撤回</view>
              <!-- <view class="menu-item">回复</view> -->
              <view class="menu-item" @tap="closeMenu">关闭</view>
            </view>
          </view>
        </view>
      </view>

      <!--语音-->
      <view class='chat-msg' v-if="item.type=='audio' && !item.isMe">
        <image class='user-avatar' :src="item.avatar" @tap="gotoUserDetail" @longpress='longTapAt' :data-item="item"></image>
        <view class='msg'>
          <view v-if="!item.history" class='user-name'>
            <view :class="item.identify=='群主'?'identity-owner':item.identify=='管理员'?'identity-manager':'identity-normal'">{{item.identify}}</view>{{item.nick}}</view>
          <view class='msg-box'>
            <view class='content' :data-audio="item.file.mp3Url" catchtap='play' @longpress='showMsgMenu' :data-index="index" :data-item="item">
              {{item.audioText}}
              <view :class="item.timeLen<5?'voice-shot':item.timeLen<10?'voice-middle':'voice-long'">
                <image class='voice-img' :src="voiceIndex == index?'/static/images/chat/voice-right.gif':'/static/images/chat/other-voice.png'"></image> {{0 | (item.detail.file.dur / 1000)}}
              </view>
               <view class="menu-list" v-if='selectMenuIndex == index' :style="'left:'+menuLeft+'px;top:'+menuTop+'px'">
               
              <view class="menu-item" :data-msg="item.detail" :data-index="index" catchtap="deleteMsg">撤回</view>
              <view class="menu-item" :data-msg="item.detail" :data-index="index" catchtap="audioToTextOther" :data-item="item" >识别语音</view>
              <!-- <view class="menu-item">回复</view> -->
              <view class="menu-item" catchtap="closeMenu">关闭</view>
            </view>
            </view>
            
          </view>
        </view>
      </view>

      <view class='chat-msg-my' v-if="item.type=='audio' && item.isMe">
        <image class='user-avatar-my' :src="item.avatar" @tap="gotoUserDetail" @longpress='longTapAt' :data-item="item"></image>
        <view class='msg-my'>
          <view class='msg-box-my'>
            <view class='content-my'  @longpress='showMsgMenu' :data-index="index" :data-item="item" :data-audio="item.file.mp3Url" catchtap='play' >
              {{item.audioText}}
              <view :class="item.timeLen<5?'voice-shot':item.timeLen<10?'voice-middle':'voice-long'">
                {{0 | (item.detail.file.dur / 1000)}}
                <image :src="voiceIndex == index?'/static/images/chat/voice-left.gif':'/static/images/chat/my-voice.png'" class='voice-img'></image>
              </view>
            </view>
             <view class="menu-list" v-if="selectMenuIndex == index" :style="'left:'+menuLeft+'px;top:'+menuTop+'px'">
               
              <view class="menu-item" :data-msg="item.detail" :data-index="index" catchtap="deleteMsg">撤回</view>
              <view class="menu-item" :data-msg="item.detail" :data-index="index" catchtap="audioToTextOther"  :data-item="item" >识别语音</view>
              <!-- <view class="menu-item">回复</view> -->
              <view class="menu-item" catchtap="closeMenu">关闭</view>
            </view>
          </view>
        </view>
      </view>

    </view>
  </view>
</scroll-view>

<view class='bottom-box'>
  <view class='input-box'>
    <image v-if="!show" @tap="isShow" class='keyborad' src='/static/images/chat/keyborad.png'></image>
    <image v-if="show" @tap="isShow" class='keyborad' src='/static/images/chat/speak.png'></image>
    <view v-if="!show" @longpress="speakStart" @touchend="speakEnd" class='speak dp-flex-xy-center'>按住 说话</view>
    <input v-if="show" focus="focusFlag" :value="content" cursor-spacing='1' @input='content' class='inputs' placeholder="说点什么" confirm-type='send'></input>
    <image class='keyborad' catchtap='toggleEmoji' src='/static/images/chat/emoji.png'></image>
    <image v-if="content==''" class='keyborad' src='/static/images/chat/add.png' @tap='animate'></image>
    <view v-else class="send" @tap='sendTextMsg'>发送</view>
  </view>
  <view class='else' v-if="animate">
    <view class='choose-box' catchtap='chooseImg'>
      <view class='container'>
        <image class='box-img' src='/static/images/chat/photo.png'></image>
      </view>
      <text class='txts'>相册</text>
    </view>
    <view class='choose-box' bindtap="noMore">
      <view class='container'>
        <image class='box-img' src='/static/images/packet.jpg'></image>
      </view>
      <text class='txts'>红包</text>
    </view>
    <button class='choose-box-call' open-type='contact'>
      <view class='container-call'>
        <image class='box-img-call' src='/static/images/chat/call.png'></image>
      </view>
      <text class='txts'>呼叫总部</text>
    </button>
    <button class='choose-box' @tap="banAll" open-type='share'>
      <view class='container'>
        <image class='box-img' src='/static/images/share_fff.jpg'></image>
      </view>
      <text class='txts'>邀请好友</text>
    </button>
  </view>
  <view v-if="emojiFlag" class='emoji'>
   <!-- <component-emoji bind:EmojiClick="emojiCLick" bind:EmojiSend="sendTextMsg"></component-emoji> -->
  </view>
</view>
	</page>
</template>

<script>
	var NIM = require('@/vendor/NIM_Web_NIM_weixin_v5.9.1.js')
	var iconBase64Map = require('@/utils/imageBase64.js')
	var formatTime = require('@/utils/gyzjModel.js').formatTime
	var generateRichTextNode = require('@/utils/gyzjModel.js').generateRichTextNode
	var generateImageNode = require('@/utils/gyzjModel.js').generateImageNode
	var generateFingerGuessImageFile = require('@/utils/gyzjModel.js').generateFingerGuessImageFile
	import app from '@/App.vue';
	import {GYZJMODEL as gyzjModel}from '@/utils/gyzjModel.js';
	//获取全局唯一的录音管理器 recorderManager
	const recorderManager = uni.getRecorderManager()
	//创建并返回内部 audio 上下文 innerAudioContext 对象。
	const innerAudioContext = uni.createInnerAudioContext()
	let tId;
	let p;
	export default {
		data() {
			return {
				roomid: '',
				address: '',
				chatMsg: "",
				animate: false,
				show: false,
				content: '', //文本消息内容
				messageArr: [], // 渲染的数据
				onlineMember: [], // 在线成员 [{account,avatar,nick,type}]
				accountMap: {}, // 存储了账号map，目的是账号去重
				moreId: '', //详情id
				scrollTop: 9999,
				messageWrapperMaxHeight: null, // 消息列表容器最大高度
				myId: '',
				notice: '',
				emojiFlag: false, //emoji键盘标志位
				lat: '',
				lng: '',
				markers: '',
				speak: false, //语音gif显示控制
				speakFilePath: '', //语音文件临时存储
				timeLen: '',
				limit: 20,
				audioText: '',
				text: '51淘甄貨,一个可以省钱的购物平台',
				marqueePace: 1, //滚动速度
				marqueeDistance: 0, //初始滚动距离
				size: 14,
				orientation: 'left', //滚动方向
				interval: 20, // 时间间隔
				teamId: '', //群Id
				userAvatar: '',
				members: '',
				historyMsg: [],
				selectMenuIndex: -1,
				historyList: [],
				chooseMember: [],
				loadMoreStatus: false,
				reverseTime: 0,
				linList: [],
				animationData: {},
				nowHeight: 0,
				voiceIndex: -1,
				isVoicePlay: false,
				left: 9999,
				masWidth:0,
				isAnimate:false,
				scrollScenond:300,
				atMsgList:[],
				atMsgCount: 0,
			}
		},
		onLoad:function(options){
			console.log('所有值',app.globalData);
			let self = this;
			let teamId = options.teamId;
			let token = app.globalData.userInfo.access_token;
			let account = app.globalData.userInfo.accid;
			let teamName = options.teamName;
			let appKey = "c366812544b1d978c223249f7c22f911";
			this.moreId= options.id;
			this.myId= app.globalData.userInfo.accid;
			this.teamId= teamId;
			this.userAvatar= app.globalData.userInfo.avatarUrl;
			// 设置顶部标题
			uni.setNavigationBarTitle({
			  title: options.city + teamName,
			});
			//获取公告内容
			gyzjModel.prototype.getSeniorMore(options.id).then(res => {
			  let that =this;
			  console.log(res);
			  self.notice= res.data.order_message;
			  self.masAnimate()    
			});
		
			this.messageWrapperMaxHeight= uni.getSystemInfoSync().windowHeight - 120;
			console.log('初始化的值appKey',appKey);
			console.log('初始化的值account',account);
			console.log('初始化的值token',token);
			console.log('初始化的值self.onConnect',self.onConnect);
			console.log('初始化的值self.onError',self.onError);
			console.log('初始化的值self.onWillReconnect',self.onWillReconnect);
			console.log('初始化的值self.onDisconnect',self.onDisconnect);
			console.log('初始化的值self.onSyncDone',self.onSyncDone);
			console.log('初始化的值self.onMsgs',self.onMsgs);
			console.log('初始化的值self.onSysMsg',self.onSysMsg);
			var nim = NIM.getInstance({
			  // 初始化SDK
			  appKey: appKey,
			  account: account,
			  token: token,
			  onconnect: self.onConnect,
			  onerror: self.onError,
			  onwillreconnect: self.onWillReconnect,
			  ondisconnect: self.onDisconnect,
			  // 同步完成
			  onsyncdone: self.onSyncDone,
			  //聊天消息
			  onmsg: self.onMsgs,
			  onsysmsg: self.onSysMsg,
			});
			// 暂存群实例
			app.globalData.nim = nim;
			this.getHistory(true);
			this.getMemberList(this.teamId);
			this.scrollToBottom()
		},
		methods:{
		// 进入联系我们
		handleContactUsTap: function() {
		  uni.navigateTo({
			url: '../../../user-center/contact-us/contact-us',
		  })
		},
		//公告跑马灯
		  runMarquee: function() {
		    let that = this;
		    let interval = setInterval(function() {
		      //文字一直移动到末端
		      if (-that.marqueeDistance < that.length) {
		        that.marqueeDistance= that.marqueeDistance - that.marqueePace;
		      } else {
		        clearInterval(interval);
		        that.marqueeDistance= that.windowWidth;
		        that.runMarquee();
		      }
		    }, that.interval);
		  },
		masAnimate() {
		  let _this =this;
		  let sceond = _this.scrollScenond * _this.notice.length;
		  uni.createSelectorQuery().selectAll('.marquee_text').boundingClientRect(function (rects) {
			_this.masWidth= rects[0].width + 30;
			_this.left=uni.getSystemInfoSync().windowWidth;
			_this.isAnimate= false;
			setTimeout(function(){
			  _this.isAnimate= true;
				_this.left= - _this.masWidth;
			  p = setInterval(() => {
				_this.left= uni.getSystemInfoSync().windowWidth;
				  _this.isAnimate= false;
				  _this.isAnimate=true;
				  _this.left=_this.masWidth
			  }, sceond)
			},150)
		  }).exec()
		},
		 //暂未开放
		  noMore() {
		    uni.showToast({
		      title: '该功能尚未开发,敬请期待',
		      icon: 'none',
		      duration: 2000,
		    })
		  },
	   //语音键盘切换
		isShow: function() {
		  this.show= !this.show;
		},
		//功能显示
		  animate() {
			this.animate=!this.animate;
			this.emojiFlag= false;
			this.show= true;
		  },
		//群详情跳转
		  About() {
		    let moreId = this.data.moreId;
		    let teamId = this.data.teamId;
		    uni.navigateTo({
		      url: '../chat-group-more/chat-group-more?id=' + moreId + '&tid=' + teamId
		    })
		  },
	   //连接服务器
		onConnect() {
		  console.log('连接成功');
		},
		onWillReconnect(obj) {
			// 此时说明 `SDK` 已经断开连接, 请开发者在界面上提示用户连接已断开, 而且正在重新建立连接
			console.log('即将重连', obj);
		  },
			onDisconnect(error) {
				// 此时说明 `SDK` 处于断开状态, 开发者此时应该根据错误码提示相应的错误信息, 并且跳转到登录页面
				//console.log('连接断开', error);
				if (error) {
				  switch (error.code) {
					// 账号或者密码错误, 请跳转到登录页面并提示错误
					case 302:
					  break;
					  // 重复登录, 已经在其它端登录了, 请跳转到登录页面并提示错误
					case 417:
					  break;
					  // 被踢, 请提示错误后跳转到登录页面
					case 'kicked':
					  break;
					default:
					  break;
				  }
				}
		  },
		onError(error, obj) {
		    console.log('发生错误', error, obj);
		  },
		
		  onSyncDone() {
		    console.log('同步完成');
		    this.getMemberList(this.teamId);
		
		  },
		 onSysMsg(msg) {
		    let _this =this;
		    console.log(msg)
		    uni.showToast({
		      title: msg.deletedMsgFromNick+'撤回了一条消息',
		      icon:"none"
		    })
		    if (msg.type == 'deleteMsg'){
		      let list = _this.messageArr;
		      for(let item in list){
		        
		        if (msg.msg.time == list[item].detail.time){
		          console.log(msg.msg.time)
		          console.log(list[item].detail.time)
		          list.splice(item, 1);
		          list.push({
		            ...msg,
		            detail: msg.msg,
		            tip: msg.deletedMsgFromNick+'撤回了一条消息',
		          })
		        }
		      }
		      _this.messageArr= list;
		      console.log(_this.messageArr);
		   }
		  },
		  /**
		     * 收到消息
		     * [{attach: {from,fromNick,gaged,tempMuteDuration,tempMuted,to:[],toNick:[],type},chatroomId,flow,from,custom,content,fromClientType,fromCustom,resend,idClient,status,text,time,type}]
		     */
		    onMsgs(msgs) {
		      //console.log(msgs)
		      let self = this
		      let msg = msgs
		      switch (msg.type) {
		        // case 'notification':
		        //     {
		        //         self.addNotificationToRender(msg)
		        //         break
		        //     }
		        case 'text':
		          {
		            self.getAvatar(msg, false) //传入处理头像     
		            break
		          }
		        case 'image':
		          {
		            self.getAvatar(msg, false)
		            break
		          }
		        case 'custom':
		          {
		            self.addCustomMsgToRender(msg)
		            break
		          }
		        case 'tip':
		          {
		            self.addTipMsgToRender(msg)
		            break
		          }
		        case 'audio':
		          {
		           self.getAvatar(msg, false)
		            break
		          }
		        case 'robot':
		          {
		  
		          }
		        default:
		          {
		          //  self.addOtherMsgToRender(msg)
		            break
		          }
		      }
		      // 滚动到底部
		      self.scrollToBottom()
		    },
			/**
			   * 滚动页面到底部
			   */
			  scrollToBottom() {
			    let self = this
			    self.scrollTop= 999999;
			  },
			  scrollToCenter() {
			      let _this = this;
			      const query = uni.createSelectorQuery();
			      let a = uni.createSelectorQuery();
			      query.select('#content-box').boundingClientRect()
			      query.exec(function(res) {
			        _this.nowHeight= res[0].height;
			        _this.scrollTop= res[0].height - _this.nowHeight - _this.contentHeight;
			      })
			    },
				 contentHeigth(){
				    let _this = this;
				    let query = uni.createSelectorQuery();
				    query.select('#recordWrapper').boundingClientRect();
				    query.exec(function (res) {
				      _this.contentHeight= res[0].height;
				    })
				  },
				/*获取群组成员列表*/
				  getMemberList(teamId) {
				    console.log('teamId'+teamId);
				    let self = this;
				    app.globalData.nim.getTeamMembers({
				      teamId: teamId,
				      done: (error, obj) => {
				        if (error) {
				          return;
				        }
				        self.members=obj.members;
				      }
				    })
				  },
				   //文本消息
				    content(e) {
				      let content = e.detail.value;
				      if (content[content.length - 1] == "@") {
				        uni.navigateTo({
				          url: '/pages/chat-room/chat-group-member/chat-group-member?tid=' + this.teamId + '&id=' + this.moreId,
				        })
				      }
				      this.content= e.detail.value;
				    },
					longTapAt(e){
					    console.log(e.currentTarget.dataset.item)
					    let list = this.chooseMember;
					    for(let i of list){
					      if (i.nick == e.currentTarget.dataset.item.nick){
					        return;
					      }
					    }
					    list.push(e.currentTarget.dataset.item)
					
					    this.content=this.content+"@"+e.currentTarget.dataset.item.nick;
					    this.chooseMember= list;
					    this.show=true;
					  },
				//发送文本消息
				  sendTextMsg() {
				    let text = this.content;
				    if (text == '') {
				      uni.showToast({
				        title: '发送信息内容不能为空',
				        icon: 'none',
				        duration: 2000,
				      })
				    } else if (this.chooseMember.length > 0) {
				      this.emojiFlag= false;
				      this.sendRequest(text, true)
				    } else {
				      this.emojiFlag= false;
				      this.sendRequest(text)
				    }
				  },
			sendRequest(text, toObj = false) {
			    let teamId = this.teamId
			    let self = this
			    this.content= '';
			    console.log(teamId)
			    if (toObj == true) {
			      let nickList = [];
			      console.log(this.chooseMember)
			      for (let item of this.chooseMember) {
			        console.log(this.chooseMember)
			        nickList.push(item)
			      }
			      app.globalData.nim.sendText({
			        scene: "team",
			        to: teamId,
			        text: text,
			        done: (err, msg) => {
			          console.log('error的值',error);
			          console.log('msg的值', msg);
			          for (let i of nickList){
			            app.globalData.nim.sendTipMsg({
			              scene: 'p2p',
			              to: i.account,
			              tip: msg.fromNick + '@了'+i.nick,
			              done: function (err, msg) {
			                self.chooseMember= [];
			              }
			            }, {
			                forcePush: "true",
			              });
			          }
			        
			          //传入消息数据
			          self.getAvatar(msg, true)
			
			        }
			      }, {
			        forcePush: "true",
			      })
			    } else {
			      console.log("发送")
			      app.globalData.nim.sendText({
			        scene: "team",
			        to: teamId,
			        text: text,
			        done: (err, msg) => {
			          console.log('err的值', err);
			          console.log('msg的值', msg);
			          if (err) {
			            //console.log(err)
			            return
			          }
			          //传入消息数据
			          self.getAvatar(msg, true)
			          // 滚动到底部
			        }
			      })
			    }
			
			  },
			//处理消息获得该消息发起者头像
			  getAvatar(msgs, isMe) {
			    let dataMsg = msgs;
			    console.log(msgs)
			    let self = this;
			    app.globalData.nim.getUser({
			      account: msgs.from,
			      done: (err, msg) => {
			        if (err) {
			          return;
			        }
			        // 刷新界面
			        if (dataMsg.type == 'text') {
			          self.addTextToRender(dataMsg, msg.avatar, dataMsg);
			        } else if (dataMsg.type == 'image') {
			          self.addImageToRender(dataMsg, msg.avatar, dataMsg);
			        } else if (dataMsg.type == 'tip') {
			          self.addTipToRender(dataMsg, msg.avatar, dataMsg);
			        } else if (dataMsg.type == 'audio') {
			          self.addAudioToRender(dataMsg, msg.avatar, dataMsg);
			        }
			        self.scrollToBottom();
			      }
			    })
			  },
			  //文本---表情消息处理
			    addTextToRender(msg, avtar, detail) {
			      this.getMemberList(this.teamId);
			      let list = this.members;
			      let ids = list.filter(item => item.account == msg.from)
			      let userAvatar = this.userAvatar;
			      let isMe = this.myId == msg.from;
			  
			      // 刷新界面
			      let displayTimeHeader = formatTime(msg.time)
			      this.messageArr=[...this.messageArr, {
			          detail: detail,
			          account: msg.from,
			          nick: msg.fromNick,
			          text: msg.text,
			          type: msg.type,
			          time: msg.time,
			          isMe: isMe,
			          avatar: avtar,
			          displayTimeHeader,
			          identify: ids[0].type == 'owner' ? '群主' : ids[0].type == 'manager' ? '管理员' : '成员', //身份
			          nodes: generateRichTextNode(msg.text)
			        }]
			    },
				//选择图片
				  chooseImg(e) {
				    let type = e.currentTarget.dataset.type;
				    let self = this;
				    uni.chooseImage({
				      sourceType: ['album'],
				      count:3,
				      success: function(res) {
				        self.sendImageToNOS(res)
				      },
				    })
				  },
				  /* 发送图片到nos */
				    sendImageToNOS(res) {
				      uni.showLoading({
				        title: '发送中...',
				      })
				      let self = this;
				      let tempFilePaths = res.tempFilePaths;
				      for (let i = 0; i < tempFilePaths.length; i++) {
				        // 上传文件到nos
				        app.globalData.nim.sendFile({
				          type: 'image',
				          scene: 'team',
				          to: self.teamId,
				          wxFilePath: tempFilePaths[i],
				          done: function(err, msg) {
				            uni.hideLoading()
				            if (err) {
				              return
				            }
				            // 刷新界面
				            self.getAvatar(msg);
				            // 滚动到底部
				            self.scrollToBottom();
				          }
				        })
				      }
				    },
			addTipToRender(msg, avatar) {
			    this.getMemberList(this.teamId);
			    let list = this.members;
			    let ids = list.filter(item => item.account == msg.from);
			    let isMe = this.myId == msg.from;
			    let userAvatar = this.userAvatar;
			    // 添加到渲染队列
			    let displayTimeHeader = formatTime(msg.time);
			    this.conten= '';
			    this.animate= false;
			    this.messageArr=[...this.messageArr, {
			        detail: msg,
			        account: msg.from,
			        nick: msg.fromNick,
			        text: msg.text,
			        type: msg.type, // "image"
			        time: msg.time,
			        displayTimeHeader,
			        tip: msg.tip,
			        isMe: isMe,
			        avatar: avatar,
			        identify: ids[0].type == 'owner' ? '群主' : ids[0].type == 'manager' ? '管理员' : '成员', //身份
			      
			      }]
			  },
			  /* 添加图片消息到渲染队列中 */
			    addImageToRender(msg, avatar) {
			      this.getMemberList(this.data.teamId);
			      let list = this.data.members;
			      let ids = list.filter(item => item.account == msg.from);
			      let isMe = this.data.myId == msg.from;
			      let userAvatar = this.data.userAvatar;
			      // 添加到渲染队列
			      let displayTimeHeader = formatTime(msg.time);
			      this.conten= '';
			      this.animate= false;
			      this.messageArr= [...this.data.messageArr, {
			          detail: msg,
			          account: msg.from,
			          nick: msg.fromNick,
			          text: msg.text,
			          file: msg.file, // image消息才有此字段
			          type: msg.type, // "image"
			          time: msg.time,
			          displayTimeHeader,
			          isMe: isMe,
			          avatar: avatar,
			          identify: ids[0].type == 'owner' ? '群主' : ids[0].type == 'manager' ? '管理员' : '成员', //身份
			          nodes: generateImageNode(msg.file)
			        }]
			    },
				//预览图片
				  rangImg(e) {
				    let src = e.currentTarget.dataset.src;
				    uni.previewImage({
				      urls: [src],
				    })
				  },
				  bindMsgBoxClick(){
				      this.emojiFlag= false;
				      this.animate= false;
				    },
				/* 切换出emoji键盘 */
				  toggleEmoji() {
					this.emojiFlag= !this.emojiFlag;
					this.show= true;
					this.animate=false;
				  },
				  /* emoji组件回调 */
				    emojiCLick(e) {
				      let val = e.detail;
				      if (val == '[删除]') {
				        let lastIndex = this.content.lastIndexOf('[');
				        if (lastIndex != -1) {
				          this.content= this.content.slice(0, lastIndex);
				        }
				        return;
				      }
				      if (val[0] == '[') { // emoji
				        this.content= this.content + val;
				      }
				    },
					/* emoji点击发送 */
					  emojiSend(e) {
					    let val = this.data.content
					    this.sendRequest(val);
					    this.emojiFlag=false;
					  },
					   /* 添加自定义消息到渲染队列中 */
					addCustomMsgToRender(msg) {
					  let displayTimeHeader = formatTime(msg.time);
					  let renderType = msg.content;
					  this.messageArr= [...this.data.messageArr, {
						  detail: msg,
						  account: msg.from,
						  nick: msg.fromNick,
						  text: msg.text,
						  content: msg.content, // 自定义消息才有此字段
						  type: renderType, // "custom"、猜拳
						  time: msg.time,
						  displayTimeHeader,
						}]
					},
					 closeAtToast(){
					    this.atMsgCount=0;
					  },
					  addTipMsgToRender(msg) {
					      let displayTimeHeader = formatTime(msg.time);
					      let renderType = msg.content;
					  
					      this.atMsgCount= this.atMsgCount + 1;
					      this.messageArr= [...this.messageArr, {
					          detail: msg,
					          account: msg.from,
					          nick: msg.fromNick,
					          text: msg.text,
					          tip:msg.tip,
					          content: msg.content, // 自定义消息才有此字段
					          type: msg.type, // "custom"、猜拳
					          time: msg.time,
					          displayTimeHeader,
					        }]
					    },
						 //开始录音
						  speakStart() {
						    this.speak=true;
						    const options = {
						      duration: 100000, //指定录音的时长，单位 ms
						      sampleRate: 16000, //采样率
						      numberOfChannels: 1, //录音通道数
						      encodeBitRate: 96000, //编码码率
						      format: 'mp3', //音频格式，有效值 aac/mp3
						      frameSize: 50, //指定帧大小，单位 KB
						    }
						    //开始录音
						    recorderManager.start(options);
						    recorderManager.onStart(() => {});
						    //错误回调
						    recorderManager.onError((res) => {
						      ////console.log(res, '错误回调');
						    })
						  },
						  //停止录音
						    speakEnd() {
						      this.speak= false;
						      recorderManager.stop();
						      recorderManager.onStop((res) => {
						        this.speakFilePath= res.tempFilePath;
						        this.timeLen=parseInt(res.duration / 1000);
						        this.sendSpeakFileToNOS(res.tempFilePath)
						      })
						    },
							//播放声音
							  play(e) {
							    let _this = this;
							    innerAudioContext.src = e.currentTarget.dataset.audio;
							    if (this.isVoicePlay) {
							      innerAudioContext.stop();
							    } else {
							      innerAudioContext.play()
							    }
							    innerAudioContext.onPlay(() => {
							      _this.voiceIndex=e.currentTarget.dataset.index;
							      _this.isVoicePlay=true;
							    })
							    innerAudioContext.onError((res) => {
							    })
							    innerAudioContext.onEnded(() => {
							      _this.voiceIndex= -1;
							      _this.isVoicePlay= false;
							    })
							    innerAudioContext.onStop(() => {
							      _this.voiceIndex= -1;
							      _this.isVoicePlay= false;
							    })
							  },
							/* 发送语音 */
							  sendSpeakFileToNOS(res) {
							    uni.showLoading({
							      title: '发送中...',
							    })
							    let self = this;
							    let tempFilePaths = res;
							    // 上传文件到nos
							    app.globalData.nim.sendFile({
							      scene: 'team',
							      to: self.teamId,
							      type: 'audio',
							      wxFilePath: tempFilePaths,
							      done: function(err, msg) {
							        wx.hideLoading()
							        if (err) {
							          return
							        }
							        // 刷新界面
							        self.getAvatar(msg, true)
							      }
							    })
							  },
							  //我的语音识别
							    audioToText(e, urls, data) {
							      let self = this;
							      let url = urls;
							      let datas = data
							  
							      app.globalData.nim.audioToText({
							        url: url,
							        done: function(err, msg) {
							          wx.hideLoading()
							          if (err) {
							            return;
							          }
							          if (!datas.file) {
							            datas.file = {};
							          }
							          datas['timeLen'] = self.data.timeLen;
							          datas['audioText'] = msg.text;
							          self.addAudioToRender(datas);
							          self.getAvatar(datas, true);
							          //滚动到底部
							          self.scrollToBottom();
							        }
							      });
							    },
						 //其他人语音识别
						  audioToTextOther(e, urls, data) {
						    let self = this;
						    let index = e.currentTarget.dataset.index;
						    let datas = e.currentTarget.dataset.item;
						    let url = e.currentTarget.dataset.item.file.mp3Url;
						
						    app.globalData.nim.audioToText({
						      url: url,
						      done: function(err, msg) {
						        uni.hideLoading()
						        if (err) {
						          return;
						        }
						        datas['timeLen'] = parseInt(datas.file.dur / 1000);
						        datas['audioText'] = msg.text;
						        self.audioTextRender(datas, index);
						        //滚动到底部
						        // self.scrollToBottom()
						      }
						    });
						  },
						  audioTextRender(item, index) {
						      let obj = item;
						      let _this = this;
						      let list = this.messageArr;
						      list.splice(index, 1, item);
						      this.messageArr= list;
						        _this.closeMenu();
						    },
						/* 添加语音消息到渲染队列中 */
						  addAudioToRender(msg, avatar) {
						    this.getMemberList(this.teamId);
						    let list = this.members;
						    let ids = list.filter(item => item.account == msg.from);
						    let isMe = this.myId == msg.from;
						    let userAvatar = this.userAvatar;
						    // 添加到渲染队列
						    let displayTimeHeader = formatTime(msg.time)
						    this.conten= '';
						    this.animate= false;
						    this.messageArr= [...this.messageArr, {
						        detail: msg,
						        account: msg.from,
						        nick: msg.fromNick,
						        text: msg.text,
						        file: msg.file, // image消息才有此字段
						        type: msg.type, // "image"
						        time: msg.time,
						        displayTimeHeader,
						        isMe: isMe,
						        timeLen: msg.timeLen,
						        audioText: msg.audioText,
						        avatar: avatar,
						        identify: ids[0].type == 'owner' ? '群主' : ids[0].type == 'manager' ? '管理员' : '成员', //身份
						        nodes: generateImageNode(msg.file)
						      }]
						  },
						//全体禁言，需要身份操作
						  banAll() {
						    let teamId = this.data.teamId;
						    app.globalData.nim.muteTeamAll({
						      teamId: teamId,
						      type: 'normal',
						      done: function(err, obj) {
						        if (err) {
						          return ;
						        }
						      }
						    });
						  },
					//处理历史消息获得该消息发起者头像
					  dealHistroyAvatar(msgs, isFirst = false,pushLength) {
					    console.log('歷史消息');
					    let dataMsg = msgs;
					    let self = this;
					    let list = this.messageArr;
					    let linList = this.linList;
					    // let arr = [];
					    app.globalData.nim.getUser({
					      account: dataMsg.account,
					      done: (err, msg) => {
					        if (err) {
					          return ;
					        }
					        dataMsg.avatar = msg.avatar;
					        dataMsg['from'] = msg.account;
					        dataMsg['history'] = true;
					        linList.unshift(dataMsg);
					        if (linList.length % pushLength == 0 && linList.length > 0) {
					          wx.hideLoading()
					          linList.sort(function(item1,item2){
					            return item1.time - item2.time
					          })
					          console.log(linList.concat(list));
					          self.messageArr= linList.concat(list);
					          self.linList= [];
							if (isFirst) {
							  self.scrollToBottom();
							} else {
							  self.scrollToCenter();
							}
					          setTimeout(function() {
					            self.loadMoreStatus= false;
					          }, 100)
					        } else {
					          self.linList= linList;
					        }
					      }
					    })
					  },
					  //历史消息去重
					    unique(arr) {
					      var res = [arr[0]];
					      for (var i = 1; i < arr.length; i++) {
					        var repeat = false;
					        for (var j = 0; j < res.length; j++) {
					          if (arr[i].msgId == res[j].msgId) {
					            repeat = true;
					            break;
					          }
					        }
					        if (!repeat) {
					          res.push(arr[i]);
					        }
					      }
					      return res;
					    },
						//撤回
						  deleteMsg(e) {
						    let _this = this;
						    console.log(e.currentTarget.dataset.msg)
						    app.globalData.nim.deleteMsg({
						      msg: e.currentTarget.dataset.msg,
						      done: function(event,msg) {
						        _this.closeMenu();
						        if (!event) {
						          console.log(event)
						          console.log(msg)
						          let list = _this.messageArr;
						          list.splice(e.currentTarget.dataset.index, 1);
						          _this.messageArr= list;
						          //console.log(_this.data.messageArr);
						          uni.showToast({
						            title: '消息已撤回',
						            icon: "none",
						          })
						        } else {
						          uni.showToast({
						            title: "消息已超过2分钟，不能撤回",
						            icon: "none",
						          })
						        }
						
						      }
						    })
						  },
							pushHistory() {
						      let _this = this;
						      if (this.loadMoreStatus == false) {
						        this.loadMoreStatus=true;
						        uni.showLoading({
						          title: "加载中"
						        })
						        _this.contentHeigth();
						        _this.getHistory();
						      }
						    },
							getHistory(isFirst = false) {
							    console.log('getHistory');
							    console.log('data:' + this);
							    console.log('to:'+this.teamId);
							    console.log('limit:' + this.limit);
							    console.log('endTime:' + this.reverseTime);
							    let self = this;
							    this.limit= this.limit;
							    app.globalData.nim.getHistoryMsgs({
							      scene: 'team',
							      to: this.teamId,
							      limit: this.limit,
							      endTime: this.reverseTime,
							      asc: true,
							      reverse: false,
							      msgTypes: ['text', 'image', 'audio'],
							      done: function(err, msg) {
							        console.log('錯誤1:',err);
							        console.log('消息1:',msg);
							        if (!msg.msgs || err) {
							         
							          return;
							        }
							        console.log('msg:' + msg.msgs);
							        let allMsg = msg.msgs.filter(item => item != 'custom')
							        let arr = [];
							        let myId = self.myId;
							        console.log('我的天');
							        console.log(allMsg+'---'+myId);
							        for (let i = 0; i < allMsg.length; i++) {
							          if (0 == i) {
							            self.reverseTime= allMsg[i].time;
							          }
							          // if (allMsg[i].type != 'custom') {
							          let isMe = myId == allMsg[i].from
							          // 添加到渲染队列
							          let msgType = allMsg[i].type
							          let displayTimeHeader = formatTime(allMsg[i].time)
							          let list = {
							            detail: allMsg[i],
							            account: allMsg[i].from,
							            nick: allMsg[i].fromNick,
							            text: allMsg[i].text,
							            file: allMsg[i].file, // image消息才有此字段
							            type: allMsg[i].type, // "image"
							            time: allMsg[i].time,
							            displayTimeHeader,
							            isMe: isMe,
							            msgId: allMsg[i].idServer,
							            avatar: '',
							            nodes: msgType == 'text' ? generateRichTextNode(allMsg[i].text) : generateImageNode(allMsg[i].file)
							          }
							          arr.unshift(list)
							
							        }
							        for (let i = 0; i < arr.length; i++) {
							
							          if (isFirst == false) {
							            console.log(1);
							            self.dealHistroyAvatar(arr[i], false, arr.length)
							          } else {
							            console.log(2);
							            self.dealHistroyAvatar(arr[i], true, arr.length)
							          }
							        };
							        uni.hideLoading();
							      }
							    })
							  },
							  updateMessList() {
							      let list = _this.messageArr;
							      list.splice()
							    },
							    closeMenu() {
							      this.selectMenuIndex= -1;
							    },
							showMsgMenu(e) {
							    //console.log(e);
							    this.selectMenuIndex= e.currentTarget.dataset.index;
							    this.menuLeft= e.detail.x - 100;
							    this.menuTop= e.detail.y - 100;
							
							  },
							  sendTipsMsg() {
							      var msg = nim.sendTipMsg({
							        scene: 'p2p',
							        to: 'account',
							        tip: 'tip content',
							        done: sendMsgDone
							      });
							    },
								gotoUserDetail(e) {
								    console.log(e);
								    var id = e.currentTarget.dataset.item.from;
								    console.log("aid:" + id);
								    var arr = id.split('gy');
								    id = arr[1];
								    uni.navigateTo({
								      url: '/pages/user-center/my-info/cardcase/cardcase?id=' + id,
								    })
								  },
								  getAtMember() {
								      let content = this.content
								      if (app.globalData.chooseMember) {
								        let addContent = "@" + app.globalData.chooseMember.nick + " ";
								        if (content.indexOf(addContent) != -1) {
								          content = content.substr(0, content.length - 1)
								        } else {
								          content = content + app.globalData.chooseMember.nick + " ";
								        }
								        //console.log(this.data.chooseMember);
								        let list = this.chooseMember;
								        list.push(app.globalData.chooseMember);
								        this.content= content;
								        this.chooseMember=list;
								        app.globalData.chooseMember = null;
								      }
								    },
		
		}
	}
</script>

<style>
	
	.notice {
	  width: 100%;
	  height: 80upx;
	  background: rgb(244, 244, 244);
	  position: fixed;
	  top: 0;
	  display: flex;
	  justify-content: space-around;
	  align-items: center;
	  z-index: 9;
	}
	
	.noticeIcon {
	  width: 40upx;
	  height: 40upx;
	}
	
	.noticeContent {
	  width: 80%;
	  height: 60upx;
	  border-right: 10upx;
	  background: white;
	  padding-left: 10upx;
	  display: flex;
	  align-items: center;
	  color: #5f6062;
	  font-size: 30upx;
	  overflow: hidden;
	  border-radius: 8upx;
	}
	
	::-webkit-scrollbar {
	  width: 0;
	  height: 0;
	  color: transparent;
	}
	.point-box{
	  background: white;
	  border-radius: 10upx;
	  position: fixed;
	  right:0px;
	  left: 0px;
	  top: 8%;
	  margin: auto;
	  width:250upx;
	  line-height: 60upx;
	  z-index: 9999;
	  text-align: center;
	  font-size: 32upx;
	
	
	}
	.chat-msg-box {
	  width: 100%;
	  position: relative;
	  padding: 0 3%;
	  box-sizing: border-box;
	  margin-top: 80upx;
	  height: calc(100vh - 200upx);
	}
	
	.chat-msg {
	  width: 100%;
	  display: flex;
	  margin-top: 20upx;
	}
	
	.user-avatar {
	  width: 93upx;
	  height: 80upx;
	  border-radius: 10upx;
	}
	
	.msg {
	  /* width: 75%; *//* margin-left: 10upx; */
	  width: 100%;
	  margin-left: 10upx;
	  display: block;
	  overflow: hidden;
	}
	
	.user-name {
	  width: 100%;
	  height: 40upx;
	  font-size: 30upx;
	  color: gray;
	  overflow: hidden;
	  display: flex;
	  align-items: center;
	}
	
	.msg-box {
	  display: flex;
	}
	
	.thin {
	  width: 20upx;
	  height: 20upx;
	}
	
	.content {
	  min-width: 10%;
	  max-width: 95%;
	  margin-top: 10upx;
	  background: white;
	  border-radius: 10upx;
	  padding: 10upx 20upx 10upx 20upx;
	  font-size: 30upx;
	}
	
	.content-img {
	
	  min-width: 10%;
	  max-width: 95%;
	  margin-top: 10upx;
	  background: rgb(153, 152, 152);
	  border-radius: 10upx;
	  padding: 10upx 20upx 10upx 20upx;
	  font-size: 30upx;
	}
	
	.keyborad {
	  width: 80upx;
	  height: 80upx;
	  /* margin-top: 10upx; */
	}
	
	.speak {
	  width: 50%;
	  height: 80upx;
	  /* border: 1px solid #339900; */
	  border: 1px solid #bfc0c2;
	  border-radius: 20upx;
	  color: #bfc0c2;
	  /* margin-top: 10upx; */
	  padding: 0 20upx;
	}
	
	.inputs {
	  width: 50%;
	  min-height: 80upx;
	  border-bottom: 1px solid #390;
	  overflow-x: hidden;
	  overflow-y: hidden;
	  word-break: break-all;
	  padding: 0 20upx;
	}
	
	.more {
	  width: 80upx;
	  height: 80upx;
	  position: fixed;
	  top: 80upx;
	  right: 0;
	  background: black;
	  color: white;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 28upx;
	}
	
	.send {
	  width: 100upx;
	  background: #390;
	  height: 80upx;
	  font-size: 28upx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  color: white;
	  border-radius: 8upx;
	}
	
	.chat-msg-my {
	  width: 100%;
	  display: flex;
	  margin-top: 20upx;
	  position: relative;
	}
	
	.user-avatar-my {
	  width: 80upx;
	  height: 80upx;
	  border-radius: 10upx;
	  position: absolute;
	  right: 0;
	}
	
	.user-name-my {
	  width: 100%;
	  height: 40upx;
	  font-size: 30upx;
	  color: gray;
	  text-align: right;
	}
	
	.msg-my {
	  width: 75%;
	  margin-left: 11%;
	}
	
	.content-my {
	  min-width: 10%;
	  max-width: 100%;
	  background: rgb(158, 234, 106);
	  border-radius: 10upx;
	  padding: 15upx 20upx 15upx 20upx;
	  font-size: 32upx;
	  word-break: break-all;
	  margin-top: 10upx;
	  /* min-height: 50upx; */
	}
	
	.menu-list {
	  width: 200upx;
	  position: fixed;
	  /* top:10%; *//* right:25%; */
	  font-size: 30upx;
	  background: white;
	  z-index: 52;
	}
	
	.menu-list>.menu-item {
	  width: 100%;
	  line-height: 100upx;
	  text-align: center;
	  border-bottom: 2upx solid #eee;
	}
	
	.msg-box-my {
	  width: 100%;
	  display: flex;
	  justify-content: flex-end;
	}
	
	.input-box {
	  width: 100%;
	  min-height: 80upx;
	  background: white;
	  display: flex;
	  justify-content: space-around;
	  border-bottom: 1upx solid #bfc0c2;
	  padding: 10upx 0;
	  overflow: hidden;
	}
	
	.bottom-box {
	  width: 100%;
	  position: fixed;
	  bottom: 0;
	  background: rgb(239, 239, 244);
	  /* animation: myfirst 2s;
	      animation-fill-mode: forwards; */
	}
	
	@keyframes myfirst {
	  0% {
	    bottom: -400upx;
	  }
	
	  100% {
	    bottom: 0;
	  }
	}
	
	.else {
	  width: 93%;
	  height: 300upx;
	  margin-left: 3.5%;
	  display: flex;
	  justify-content: space-around;
	  align-items: center;
	  flex-wrap: wrap;
	}
	
	.choose-box {
	  width: 21%;
	  height: 150upx;
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	  align-items: center;
	}
	
	.container {
	  width: 75%;
	  height: 110upx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  background: white;
	  border-radius: 20upx;
	}
	
	.box-img {
	  width: 60upx;
	  height: 60upx;
	}
	
	.txts {
	  text-align: center;
	  color: gray;
	  font-size: 30upx;
	  margin-top: 10upx;
	}
	
	.content-my-img {
	  min-width: 1px;
	  max-width: 100%;
	  border-radius: 8upx;
	  padding: 0;
	  font-size: 30upx;
	  word-break: break-all;
	  margin-top: 10upx;
	  overflow: hidden;
	}
	
	.content-img {
	  min-width: 1px;
	  max-width: 100%;
	  margin-top: 10upx;
	  background: transparent;
	  border-radius: 8upx;
	  padding: 0;
	  overflow: hidden;
	}
	
	.emoji {
	  width: 100%;
	}
	
	.enter {
	  width: 100%;
	  margin-top: 20upx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  color: white;
	
	  font-size: 30upx;
	  margin-bottom: 20upx;
	
	}
	
	.enterMsg {
	  background: rgba(15, 0, 0, 0.2);
	  padding:10upx 20upx;
	  border-radius: 10upx;
	}
	
	.content-my-local {
	  position: relative;
	  min-width: 10%;
	  max-width: 100%;
	  border-radius: 20upx;
	  padding: 10upx 20upx 10upx 20upx;
	  font-size: 30upx;
	  word-break: break-all;
	  margin-top: 10upx;
	}
	
	.speakGif {
	  width: 70%;
	  height: 500upx;
	  position: fixed;
	  top: 30%;
	  margin-left: 15%;
	  z-index: 9;
	}
	
	.voice-shot {
	  width: 150upx;
	  height: 60upx;
	  display: flex;
	  color: gray;
	  align-items: center;
	}
	
	.voice-middle {
	  width: 200upx;
	  height: 60upx;
	  display: flex;
	  color: gray;
	  align-items: center;
	}
	
	.voice-long {
	  width: 230upx;
	  height: 60upx;
	  display: flex;
	  color: gray;
	  align-items: center;
	}
	
	.voice-img {
	  width: 60upx;
	  height: 60upx;
	}
	
	button {
	  position: relative;
	  display: block;
	  margin-left: 0;
	  margin-right: 0;
	  padding-left: 0;
	  padding-right: 0;
	  box-sizing: border-box;
	  font-size: 30upx;
	  text-align: center;
	  text-decoration: none;
	  line-height: 0;
	  border-radius: 10upx;
	  -webkit-tap-highlight-color: transparent;
	  overflow: visible;
	  color: gray;
	  background: rgb(239, 239, 244);
	  border: none;
	}
	
	button::after {
	  border: none;
	}
	
	.choose-box-call {
	  width: 21%;
	  height: 150upx;
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: center;
	  align-items: center;
	}
	
	.container-call {
	  width: 75%;
	  height: 110upx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  background: white;
	  border-radius: 20upx;
	}
	
	.box-img-call {
	  width: 60upx;
	  height: 60upx;
	}
	
	.example {
	  display: block;
	  width: 100%;
	  height: 70upx;
	  line-height: 70upx;
	}
	
	.marquee_box {
	  width: 100%;
	  position: relative;
	}
	
	.marquee_text {
	/* 
	  transform: translateX(100%); */
	  display: inline-block;
	  white-space: nowrap;
	  /* position: absolute; */
	
	}
	
	.ad-image {
	  width: 40upx;
	  height: 40upx;
	  margin-right: 10upx;
	  margin-top: 15upx;
	}
	
	.identity-owner {
	  width: 13%;
	  height: 38upx;
	  border-radius: 10upx;
	  background: rgb(242, 194, 36);
	  margin-right: 10upx;
	  color: white;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 28upx;
	}
	
	.identity-manager {
	  width: 13%;
	  height: 38upx;
	  border-radius: 10upx;
	  background: rgb(158, 234, 106);
	  margin-right: 10upx;
	  color: white;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 28upx;
	}
	
	.identity-normal {
	  width: 13%;
	  height: 38upx;
	  border-radius: 10upx;
	  background: rgb(143, 182, 241);
	  margin-right: 10upx;
	  color: white;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 28upx;
	}

</style>
